﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Question.aspx.cs" Inherits="Touch2Like.Web.Customer.Manage.Question" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/img/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <link href="/css/user.css" rel="stylesheet" type="text/css" />
    <link href="/css/user_content.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/flipcounter.js" type="text/javascript"></script>
    <script src="/js/jquery.fancybox.js" type="text/javascript"></script>
    <link href="/css/smoothness/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" type="text/css" />
    <script src="../../js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var questions = [];
        parent.ResetContentHeight("500");
        $(document).ready(function () {
            setTimeout(function () { parent.ResetContentHeight($("body").height()); }, 500);

            generateselquestions();

            $(".issel :input").click(function () {
                generateselquestions();
            });
        });

        $(function () {
            $("#btn_AddQuestion").click(function () {
                $("#btn_DialogRemove").css("display", "none");
                $("#btn_DialogSubmit").css("display", "");
                $("#ifrEditTag").attr("src", "../Popup/AddQuestion.aspx");
                $("#dialog").dialog({ height: 500, width: 500, modal: true, resizable: false, minWidth: 280, minHeight: 360, maxWidth: 600, maxHeight: 1000 });
                //                $("#dialog").dialog({ height: 'auto', width: 600, modal: true, resizable: true, minWidth: 600,  maxWidth: 600 });
            });
            $(".edititem").click(function () {
                $("#btn_DialogRemove").css("display", "none");
                $("#btn_DialogSubmit").css("display", "");
                $("#ifrEditTag").attr("src", "../Popup/AddQuestion.aspx?ListID=" + $(this).attr("item-value") + "&IsRemove=false");
                $("#dialog").dialog({ height: 500, width: 500, modal: true, resizable: true, minWidth: 280, minHeight: 360, maxWidth: 600, maxHeight: 1000 });
            });
            $(".removeitem").click(function () {
                $("#btn_DialogRemove").css("display", "");
                $("#btn_DialogSubmit").css("display", "none");
                $("#ifrEditTag").attr("src", "../Popup/AddQuestion.aspx?ListID=" + $(this).attr("item-value") + "&IsRemove=true");
                $("#dialog").dialog({ height: 500, width: 500, modal: true, resizable: true, minWidth: 280, minHeight: 360, maxWidth: 600, maxHeight: 1000 });
            });
        });

        function hideDialog() {
            $("#dialog").dialog("close");
        }

        function ConfirmMsg(msg) {
            if (confirm(msg)) {
                return true;
            } else {
                event.cancelBubble = true;
                event.returnValue = false;
                return false;
            }
        }

        function ClickFormButton(btnid) {
            $("#" + btnid).click();
        }

        function ClickButton(btnid) {
            if ($("#ifrEditTag")[0].contentWindow) {
                $("#ifrEditTag")[0].contentWindow.IframeClickButton(btnid)
            }
        }

        function generateselquestions() {
            questions = [];
            $(".questionitem").each(function () {
                var questionitem = $(this);
                var questionid = questionitem.find(".questionid :hidden").val();
                var ordernum = questionitem.find(".ordernum :hidden").val();
                var issel = questionitem.find(".issel :input").attr("checked");
                var txt = questionitem.text();

                if ($.trim(ordernum) == "") ordernum = "0";

                if (issel) {
                    questions[questions.length] = { "questionid": questionid, "ordernum": ordernum, "issel": issel, "txt": txt };
                }
            });

            questions.sort(compare);

            $("#selquestions").html("");
            for (var i = 0; i < questions.length; i++) {
                $("#selquestions").append(getselitem(questions[i], i));
            }
        }

        function getselitem(question, i) {
            question["ordernum"] = i;
            $("#questionitem_" + question["questionid"]).find(".ordernum :hidden").val(i);
            var selitem = $("<div qid='" + question["questionid"] + "' ordernum='" + i + "' style='line-height:35px;'><a href='###' class='up'><img src='/img/btn_Up.gif' width='14' height='14' /></a>&nbsp;<a href='###' class='down'><img src='/img/btn_Down.gif' width='14' height='14' /></a>&nbsp;" + question["txt"] + "</div>");
            if (i == 0) selitem.find(".up").css("color", "gray").find("img").css("visibility", "hidden");
            if (i == questions.length - 1) selitem.find(".down").css("color", "gray").css("visibility", "hidden");
            selitem.find(".up").click(function () {
                if (i != 0) {
                    var prev = selitem.prev();
                    $("#questionitem_" + prev.attr("qid")).find(".ordernum :hidden").val(selitem.attr("ordernum"));
                    $("#questionitem_" + selitem.attr("qid")).find(".ordernum :hidden").val(prev.attr("ordernum"));
                    generateselquestions();
                }
            });

            selitem.find(".down").click(function () {
                if (i != questions.length - 1) {
                    var next = selitem.next();
                    $("#questionitem_" + next.attr("qid")).find(".ordernum :hidden").val(selitem.attr("ordernum"));
                    $("#questionitem_" + selitem.attr("qid")).find(".ordernum :hidden").val(next.attr("ordernum"));
                    generateselquestions();
                }
            });

            return selitem;
        }

        var compare = function (a, b) {
            return parseInt(a["ordernum"]) - parseInt(b["ordernum"]);
        }
    </script>
    <style type="text/css">
        .ui-dialog
        {
            padding: 0px;
        }
        .ui-dialog-titlebar
        {
            background: #ecf0f4 -webkit-linear-gradient(#fff, #ecf0f4);
            border: 0px solid #aaaaaa;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ced4dc;
        }
        .ui-dialog-title
        {
            color: #475b6f;
            font-size: 14px;
            text-align: center;
        }
        th
        {
            text-align: center;
        }
        td
        {
            padding: 3px;
        }
        /*.ui-dialog{padding:0px;}
    .ui-dialog .ui-dialog-titlebar{}*/
    </style>
</head>
<body style="background: white; overflow: hidden;">
    <div id="dialog" title="Design a question" style="display: none; padding: 0px; background: #ecf0f4;">
        <div style="height: 385px;">
            <iframe id="ifrEditTag" src="Popup/AddQuestion.aspx" frameborder="0" style="width: 500px;
                height: 385px;"></iframe>
        </div>
        <div class="modal-footer" style="text-align: right; padding: 15px;">
            <button name="confirm" class="button medium blue" onclick="ClickButton('btn_Submit')"
                id="btn_DialogSubmit">
                <span>Save</span></button>
            <button name="confirm" class="button medium blue" onclick="ClickButton('btn_Remove')"
                id="btn_DialogRemove">
                <span>Remove</span></button>
            <button name="close_modal" class="button medium grey" onclick="ClickButton('btn_Cancel')">
                <span>Cancel</span></button>
        </div>
    </div>
    <form id="form1" runat="server">
    <div class="detail-container">
        <div class="header">
            <h3>
                Survey Setup
            </h3>
        </div>
        <div class="content">
            <div class="section-wrap">
                <div class="container">
                    <table>
                        <tr>
                            <td width="320" valign="top">
                                <div style="padding: 5px">
                                    <h3>
                                        Select your questions&nbsp;|&nbsp;
                                        <button class="button small blue" id="btn_AddQuestion" type="button">
                                            <span>Add question</span></button>
                                    </h3>
                                    <asp:Repeater ID="Repeater_Question" runat="server" OnItemDataBound="Repeater_Question_ItemDataBound">
                                        <ItemTemplate>
                                            <div style="border-bottom: 1px solid #ECEFF5; line-height: 34px;" class="questionitem"
                                                id='questionitem_<%#Eval("ListID") %>'>
                                                <span class="questionid">
                                                    <asp:HiddenField ID="tb_QuestionID" runat="server" Value='<%#Eval("ListID") %>' />
                                                </span><span class="ordernum">
                                                    <asp:HiddenField ID="tb_OrderNum" runat="server" Value='<%#Eval("OrderNum") %>' />
                                                </span>
                                                <asp:CheckBox ID="cb_Sel" runat="server" Text='<%#Eval("Question") %>' CssClass="issel" />
                                                <asp:Label ID="lbl_Type" runat="server" Text='<%#Eval("QuestionType") %>' />
                                                <button class="button small grey edititem" item-value='<%#Eval("ListID") %>' type="button">
                                                    <span>Edit</span></button>
                                                <button class="button small grey removeitem" type="button" item-value='<%#Eval("ListID") %>'>
                                                    <span>Remove</span></button>
                                            </div>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </div>
                            </td>
                            <td width="1" style="font-size: 0px; background-color: #ddd;">
                            </td>
                            <td width="320" valign="top">
                                <div style="padding: 5px">
                                    <h3>
                                        Sort your questions
                                    </h3>
                                    <div id="selquestions">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="section-wrap">
                <h3>
                    After Submission ( What do you want end-user to see after they click on Submit?
                    )
                </h3>
                <div class="container">
                    <div style="line-height: 30px;">
                        <asp:RadioButtonList ID="RadioButtonList_Choice" runat="server" RepeatLayout="Flow">
                            <asp:ListItem Value="Coupon" Selected="True">Display coupon after submission ( Need to setup coupon under Account\Coupon Setup )</asp:ListItem>
                            <asp:ListItem Value="EmailOnly">Collect Email Only ( Collect email address after the submission )</asp:ListItem>
                            <asp:ListItem Value="URL">Redirect to an URL ( Enter the Web URL below )</asp:ListItem>
                        </asp:RadioButtonList>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="form-field-view">
                        <asp:TextBox ID="TextBox_URL" runat="server" Width="250px"></asp:TextBox>
                        &nbsp;(eg. http://www.google.com)</div>
                </div>
            </div>
            <div>
                <button class="button medium blue" onclick="ClickFormButton('btn_Save')">
                    <span>Save</span></button>
                <asp:Button ID="btn_Save" runat="server" CssClass="button medium blue" OnClick="btn_Save_Click"
                    Text="Save" Style="display: none" /></div>
        </div>
    </div>
    </form>
</body>
</html>
